<script setup name="PostIndex">
import eventBus from "@/utils/eventBus";
import { usePagination } from "@/utils/composables";
import FormMode from "./modules/FormMode/index.vue";
import { parseTime } from "@/utils/aidex";
import { listPost, delPost } from "@/api/system/post";
import {cpulist} from "@/api/monitor/server"
const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } =
  usePagination();
const router = useRouter();

const data = ref({
  loading: false,
  /**
   * 详情展示模式
   * router 路由跳转
   * dialog 对话框
   * drawer 抽屉
   */
  formMode: "drawer",
  // 详情
  formModeProps: {
    visible: false,
    id: ""
  },
  // 搜索
  search: {
    name: "",
    deptId: ""
  },
  // 批量操作
  batch: {
    enable: false,
    selectionDataList: []
  },
  // 服务监控
  cpu: {
    cpuNum:0,
    sys:0,
    used:0,
    free:0,
  },
  jvm:{
    free: 0,
    total: 0,
    usage:0 ,
    used:0,
  },
  mem:{
    free: 0,
    total: 0,
    usage:0 ,
    used:0,
  },
  sys:{},
  sysFiles:[

  ]
});

// 页面挂载时 调用
onMounted(() => {
  getDataList();
 
  // 轮询5秒
  setInterval(() => {
    getDataList();
  },5000)
});
//
onBeforeUnmount(() => {
  if (data.value.formMode === "router") {
    eventBus.off("get-data-list");
  }
});

// 每页数量切换
function sizeChange(size) {
  onSizeChange(size).then(() => getDataList());
}

// 当前页码切换（翻页）
function currentChange(page = 1) {
  onCurrentChange(page).then(() => getDataList());
}

// 字段排序
function sortChange(prop, order) {
  onSortChange(prop, order).then(() => getDataList());
}
// 查询
function getDataList() {

  cpulist().then((res) => {
      data.value.cpu = res.data.cpu;
      data.value.jvm = res.data.jvm;
      data.value.mem = res.data.mem;
      data.value.sys = res.data.sys;
      data.value.sysFiles = res.data.sysFiles;
  });
}

// 编辑
function onEdit(row) {
  data.value.formMode = "drawer";
  if (data.value.formMode === "router") {
    router.push({
      name: "routerName",
      params: {
        id: row.id
      }
    });
  } else {
    data.value.formModeProps.id = row.id;
    data.value.formModeProps.visible = true;
  }
}
// 添加
function onAdd() {
  data.value.formModeProps.id = "";
  data.value.formMode = "dialog";
  data.value.formModeProps.visible = true;
}
// 批量删除 单独删除
function onDel(row) {
  const ids =
    row.id ||
    data.value.batch.selectionDataList.map((item) => {
      return item.id;
    });
  const names =
    row.postName ||
    data.value.batch.selectionDataList.map((item) => {
      return item.postName;
    });
  console.log("ids", ids, names);
  ElMessageBox.confirm("确认删除「" + names + "」吗？", "确认信息")
    .then(() => {
      delPost(ids).then((res) => {
        getDataList();
        if (res.code == 200)
          ElMessage.success({
            message: "删除成功",
            center: true
          });
      });
    })
    .catch(() => {});
}
</script>

<template>
  <div id="page">
    <!-- cpu -->
      <el-row :gutter="35" class="el-row">
          <el-col :span="6">
            <el-card class="box-card">
              <div class="cpu_box">
                  <div class="text">{{data.cpu.cpuNum}}</div>
                  <div class="description">CPU核心数</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div class="cpu_box">
                  <div class="text">{{data.cpu.sys}}%</div>
                  <div class="description">系统CPU使用率</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div class="cpu_box">
                  <div class="text">{{data.cpu.used}}%</div>
                  <div class="description">用户CPU使用率</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div class="cpu_box">
                  <div class="text">{{data.cpu.free}}%</div>
                  <div class="description">当前CPU空闲率</div>
              </div>
            </el-card>
          </el-col>
      </el-row>
      <!-- 内存 -->
      <el-row class="el-row">
        <el-col :span="24">
          <el-card >
            <template #header>
              <div class="card-header">
                <el-icon>
                  <svg-icon name="icon-park:fire" />
                </el-icon>
                <span class="card-header_content">内存</span>
              </div>
            </template>
            <div class="box">
              <!-- 四个模块 -->
              <div class="box_model">
                <div class="top">服务器总内存</div>
                <div class="bottm">
                  <div class="bottm_text">
                    <div class="text">内存</div>
                    <div class="text">
                      <span>{{data.mem.total}}</span>
                      <span>G</span>
                    </div>
                  </div>
                  <div class="bottm_text">
                    <div class="text">JVM</div>
                    <div class="text">
                      <span style="color:red">{{data.jvm.total}}</span>
                      <span>M</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="box_model">
                <div class="top">已用内存</div>
                <div class="bottm">
                  <div class="bottm_text">
                    <div class="text">内存</div>
                    <div class="text">
                      <span>{{data.mem.used}}</span>
                      <span>G</span>
                    </div>
                  </div>
                  <div class="bottm_text">
                    <div class="text">JVM</div>
                    <div class="text">
                      <span style="color:red">{{data.jvm.used}}</span>
                      <span>M</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="box_model">
                <div class="top">剩余内存</div>
                <div class="bottm">
                  <div class="bottm_text">
                    <div class="text">内存</div>
                    <div class="text">
                      <span>{{data.mem.free}}</span>
                      <span>G</span>
                    </div>
                  </div>
                  <div class="bottm_text">
                    <div class="text">JVM</div>
                    <div class="text">
                      <span style="color:red">{{data.jvm.free}}</span>
                      <span>M</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="box_model">
                <div class="top">使用率</div>
                <div class="bottm">
                  <div class="bottm_text">
                    <div class="text">内存</div>
                    <div class="text">
                      <span>{{data.mem.usage}}</span>
                      <span>%</span>
                    </div>
                  </div>
                  <div class="bottm_text">
                    <div class="text">JVM</div>
                    <div class="text">
                      <span style="color:red">{{data.jvm.usage}}</span>
                      <span>%</span>
                    </div>
                  </div>
                </div>
              </div>


            </div>
          </el-card>
        </el-col>
      </el-row>
     <!-- 磁盘 -->
     <el-row class="el-row">
        <el-col :span="24">
          <el-card>
            <template #header>
              <div class="card-header">
                <el-icon>
                  <svg-icon name="icon-park:laptop-computer" />
                </el-icon>
                <span class="card-header_content">磁盘状态</span>
              </div>
            </template>
            <!-- body -->
            <div class="container">
                <div class="box" v-for="(d,index) in data.sysFiles " :key="index">
                  <div class="top">/ 磁盘类型：{{d.sysTypeName}}</div>
                  <div class="middle">
                    <el-progress type="circle" :percentage="d.usage" />
                  </div>
                  <div class="bottom">
                        <div class="bottom_text">
                          <div class="text">总大小</div>
                          <div class="text">
                            <span>{{d.total}}</span>
                            <span>G</span>
                          </div>
                        </div>
                        <div class="bottom_text">
                          <div class="text">可用大小</div>
                          <div class="text">
                            <span style="color:#3f8652">{{d.free}}</span>
                            <span style="color:#3f8652">G</span>
                          </div>
                        </div>
                  </div>
                </div>
            </div>
          </el-card>
        </el-col>
     </el-row>
     <!-- server -->
     <el-row>
      <el-col>
        <el-card>
          <template #header>
              <div class="card-header">
                <el-icon>
                  <svg-icon name="icon-park:windows" />
                </el-icon>
                <span class="card-header_content">服务器信息</span>
              </div>
            </template>
            <!-- body -->
            <div class="server_bcontent">
              <el-descriptions  :column="2" border>
                  <el-descriptions-item
                    label="服务器名称"
                    align="center"
                    >{{data.sys.computerName}}</el-descriptions-item
                  >
                  <el-descriptions-item label="操作系统"  align="center"
                    >{{data.sys.osName}}</el-descriptions-item
                  >
                  <el-descriptions-item label="服务器IP"  align="center"
                    >{{data.sys.computerIp}}</el-descriptions-item
                  >
                  <el-descriptions-item label="系统架构"  align="center">
                    {{data.sys.osArch}}
                  </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-card>
      </el-col>
     </el-row>
     <!-- java -->
     <el-row>
      <el-col>
        <el-card>
          <template #header>
              <div class="card-header">
                <el-icon>
                  <svg-icon name="icon-park:align-text-both-one" />
                </el-icon>
                <span class="card-header_content"> Java虚拟机信息</span>
              </div>
            </template>
            <!-- body -->
            <div class="server_bcontent">
              <el-descriptions  :column="2" border>
                  <el-descriptions-item
                    label="Java名称"
                    align="center"
                    >{{data.jvm.name}}</el-descriptions-item
                  >
                  <el-descriptions-item label="Java版本"  align="center"
                    >{{data.jvm.name}}</el-descriptions-item
                  >
                  <el-descriptions-item label="启动时间"  align="center"
                    >{{data.jvm.runTime}}</el-descriptions-item
                  >
                  <el-descriptions-item label="运行时长"  align="center">
                    {{data.jvm.startTime}}
                  </el-descriptions-item>
                  <el-descriptions-item label="安装路径"  align="center"
                    >{{data.jvm.home}}</el-descriptions-item
                  >
                  <el-descriptions-item label="项目路径"  align="center">
                    {{data.sys.userDir}}
                  </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-card>
      </el-col>
     </el-row>
  </div>
</template>

<style lang="scss" scoped>
#page{
  padding:16px;
}
// 布局
.el-row {
  margin-bottom: 16px;
}
.card-header{
  display: flex;
  align-items: center;
  &_content{
    font-size:14px;
    font-weight: 700;
  }
}

.box{
  display: flex;
  justify-content: space-around;
  align-items: center;
  .box_model{
      width: 360px;
      height: 136px;
      display: flex;
      flex-direction: column;
      .top{
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        letter-spacing: 0.7px;
        font-weight: 700;
        text-align: center;
        color: #666;
        background-color: #f0f3f5;
      }
      .bottm{
        flex: 1;
        display: flex;
        justify-content: space-between;
        background-color: #f7f9fa;
        &_text{
          margin: 10px 0;
          width: 50%;
          font-size: 12px;
          color: #666;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          span:first-child{
            font-size: 22px;
            color: #3f8652;
          }
        }
      }

  }

}

.container{
  height: 249px;
  display: flex;
  .box{
    width: 25%;
    padding: 35px;
    display: flex;
    flex-direction: column;
    border-right: 1px rgb(221, 213, 213) solid;
    .top{
      width: 100%;
      height: 24px;
      line-height: 24px;
      text-indent: 24px;
      text-align: start;
      font-size: 12px;
      color: #858585;
      font-weight: 400;
    }
    .bottom{
        width: 100%;
        display: flex;
        justify-content:space-around;
        &_text{
          margin: 10px 0;
          width: 50%;
          font-size: 12px;
          color: #666;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          span{
            font-size: 22px;
            color: #2496ff;
          }
        }
      }
  }
}

.cpu_box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .text{
    width: 120px;
    text-align: center;
    color: #000;
    font-size: 42px;
  }
  .description{
    width: 120px;
    text-align: center;
    font-size: 12px;
    margin: 0;
    padding: 0;
    color: #666;
  }
}

</style>
